<template>
	<view class='flex overflow-hidden' :class="extraClass">
		<view class='content relative overflow-hidden' :class="{'text-ellipsis-3': !showAllText,'content-show': showAllText}">
			<text class='float-r clear color-active text-s float-text' @click="toggleText" :style="{'padding-left': showAllText ? '5px' : '15px'}">
				{{showAllText ? "收起" : "展开"}}
			</text>
			<text class='text-n color-main-1'>
				<slot />
			</text>
		</view>
	</view>
</template>

<script>
	import { ref } from "vue";
	export default {
		props: {
			extraClass: String
		},
		setup(){
			function toggleText(){
				showAllText.value = !showAllText.value;
			}
			const showAllText = ref(false);
			return {
				toggleText,
				showAllText
			};
		}
	}
</script>

<style>
	.float-text{
		display: inline-block;
		height: 36rpx;
		line-height: 36rpx;
		padding-right: 5px;
	}
	.content::before{
		content: '';
		float: right;
		width: 0;
		height: calc(100% - 36rpx);
	}
	.content::after{
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		background: #fff;
	}
	.content-show::after{
		display: none;
	}
</style>
